import React, { Component } from 'react';
// 导入bpmn 此处不再使用,因为我已经完全自定义了模板
import BpmnModeler from 'bpmn-js/lib/Modeler';
// 导入数据  可以从后台获取
// import { xmlStr } from '../../mock/xmlStr';

// 以下为bpmn工作流绘图工具的样式
// 左边工具栏以及编辑节点的样式
import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
// bpmn思想: 一切都是模块 一切大功能都是模块: 引入官方模块 自定义模块
// 翻译成中文的模板
import customTranslate from '../../components/BsinBpmnModeler/customTranslate/customTranslate';
// 自定义左侧面板
import customPalette from '../../components/BsinBpmnModeler/customPalette/index.js';
// 自定义画板
import customRenderer from '../../components/BsinBpmnModeler/customRender/index.js';
// 引入右侧模板
// import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';
// 自定义右侧面板
import BsinPropertiesPanel from '../../components/BsinBpmnModeler/CustomPropertiesPanel';
// 编辑工具组件
import EditorToolbar from '../../components/BsinBpmnModeler/EditorToolbar';
// 设置齿轮按钮
import SetButton from '../../components/BsinBpmnModeler/SetButton';
// 导入样式
import './index.less';

// 模拟流转流程
import TokenSimulationModule from 'bpmn-js-token-simulation';
// 流程css导入
import 'bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css';
import 'bpmn-js-token-simulation/assets/font-awesome/css/font-awesome.min.css';
import 'bpmn-js-token-simulation/assets/css/normalize.css';
import flowableModdle from './flowable.json';
import { xmlStr } from '../../mock/xmlStr.js';

/**
 * 自定义设计器
 */
class ModelDesign extends Component {
  constructor(props) {
    super(props);
  }
  state = { modeler: null };

  /**
   *  生命周期
   * componentDidMount组件加载完毕
   */
  componentDidMount() {
    this.init();
  }

  /**
   * 初始化,创建出框
   */
  init = () => {
    // 通过获取元素
    const canvas = this.canvas;
    // 将汉化包装成一个模块
    const customTranslateModule = {
      translate: ['value', customTranslate],
    };
    //  初始化实例
    this.bpmnModeler = new BpmnModeler({
      // 兼容flowable
      moddleExtensions: {
        flowable: flowableModdle,
      },
      // 元素容器
      container: canvas,
      // 附加模板
      additionalModules: [
        // 自定义左侧
        customPalette,
        // 自定义画板
        customRenderer,
        // 模拟模块
        // tokenSimulation,
        TokenSimulationModule,
        // 自定义右侧
        BsinPropertiesPanel,
        // 汉化模块
        customTranslateModule,
      ],
    });
    // 去掉图标
    document.getElementsByClassName('bjs-powered-by')[0].style.display = 'none';
    // 为了传递给子组件
    this.setState({
      modeler: this.bpmnModeler,
    });
    // 调用渲染
    this.createNewDiagram();
  };

  /**
   * 渲染,把数据添加进框
   */
  createNewDiagram = () => {
    let xml = xmlStr;
    if (this.props.editModel?.bpmnModelXml) {
      xml = this.props.editModel.bpmnModelXml;
    }
    // 这是一个promise对象 官方原来的例子是回调函数,但是说以后会取消
    this.bpmnModeler.importXML(xml).then(() => {
      // 居中自适应
      const canvas = this.bpmnModeler.get('canvas');
      canvas.zoom('fit-viewport', 'auto');
    });
  };

  render() {
    const { modeler } = this.state;
    const { editModel } = this.props;
    return (
      <div className="workflow-ui-container">
        <div
          className="workflow-ui-canvas"
          ref={(c) => (this.canvas = c)}
        ></div>
        <BsinPropertiesPanel modeler={modeler} editModel={editModel} />
        <EditorToolbar modeler={modeler} editModel={editModel} />
        <SetButton />
      </div>
    );
  }
}
export default ModelDesign;
